<template>
  <div id="main">
    <el-container>
      <!-- 下拉菜单 -->
      <el-aside width="auto">
          <common-aside></common-aside>
      </el-aside>
      <!-- 内容区域 -->
      <el-container>
        <!-- 顶部导航栏 -->
        <el-header>
          <common-header></common-header>
        </el-header>
        <!-- 标签 -->
        <common-tags></common-tags>
        <!-- 主要内容- 每个页面的内容 -->
        <el-main>
          <!-- 子路由出口 -->
          <!-- 子路由匹配到的组件将渲染在这里 -->
          <router-view></router-view>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<script>
import CommonAside from '@/components/CommonAside';
import CommonHeader from '@/components/CommonHeader';
import CommonTags from '@/components/CommonTags';
export default {
    name: 'Main',
    components: {
        CommonAside,
        CommonHeader,
        CommonTags,
    }
};
</script>

<style lang="less" scoped>
  .el-header {
    padding: 0;
  }
</style>
